<template>
	<u-sticky bgColor="#F5F6F8">
		<view class="tabs">
			<u-tabs itemStyle="height: 100rpx;font-size: 30rpx;'" lineColor="#5780EF"
				activeStyle="color: #5780EF;" inactiveStyle="color: #606672;" :current="current" :list="tabsList"
				@click="tabsChange"></u-tabs>
		</view>
	</u-sticky>
	
	<view class="order-list">
		<view class="order-item" v-for="(item, i) in orderList" :key="i" @tap="goOrderDetail(item)">
			<view class="status-box">
				<view class="name">{{item.name}}</view>
				<!-- 状态判断 -->
				<view class="status" v-if="item.status == 1">
					<text>待支付：</text>
					<view class="">
						<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
					</view>
				</view>
				<view class="status" v-else-if="item.status == 2">待发货</view>
				<view class="status" v-else-if="item.status == 3">待收货</view>
				<view class="status" v-else-if="item.status == 4">退款中</view>
				<view class="status1" v-else-if="item.status == 5">退款已完成</view>
				<view class="status1" v-else-if="item.status == 6">已完成</view>
				
				<!-- 售后中状态判断 -->
				<view class="status" v-else-if="item.status == 7">申请退款中</view>
				<view class="status" v-else-if="item.status == 8">退货退款中</view>
				<view class="status" v-else-if="item.status == 9">换货中</view>
				<view class="status" v-else-if="item.status == 10">换货已发货</view>
				
				
			</view>
			<view class="content-box">
				<view class="icon">
					<u-image width="180rpx" height="180rpx" src="/static/images/a21.png"></u-image>
				</view>
				<view class="left">
					<u-image width="170rpx" height="155rpx" src="/static/logo.png"></u-image>
				</view>
				<view class="right">
					<view class="com-title">四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙四川眉山爱媛38号可吸的果冻橙</view>
					<view class="sku-box">规格：超实惠套装1200g</view>
					<view class="count-box">购买数量：3件</view>
				</view>
			</view>
			<view class="btns-box">
				<!-- 待支付按钮 -->
				<template v-if="item.status == 1">
					<view>
						<u-button plain throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="true" type="mini" shape="circle" color="#5780EF">取消订单</u-button>
					</view>
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">去支付</u-button>
					</view>
				</template>
				<!-- 待发货 -->
				<template v-else-if="item.status == 2">
					<view>
						<u-button plain throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="true" type="mini" shape="circle" color="#5780EF">取消订单</u-button>
					</view>
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">联系客服</u-button>
					</view>
				</template>
				<!-- 待收货 -->
				<template v-else-if="item.status == 3">
					<view>
						<u-button plain throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="true" type="mini" shape="circle" color="#5780EF">联系客服</u-button>
					</view>
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">确认收货</u-button>
					</view>
				</template>
				<!-- 退款中 -->
				<template v-else-if="item.status == 4">
					<view>
						<u-button plain throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="true" type="mini" shape="circle" color="#5780EF">联系客服</u-button>
					</view>
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">取消退款</u-button>
					</view>
				</template>
				<!-- 退款已完成 已完成 -->
				<template v-else-if="item.status == 5 || item.status == 6">
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">再次购买</u-button>
					</view>
				</template>
				
				<!-- 售后中状态判断 -->
				<!-- 申请退款中 -->
				<template v-else-if="item.status == 7">
					<view>
						<u-button plain throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="true" type="mini" shape="circle" color="#5780EF">联系客服</u-button>
					</view>
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">取消退款</u-button>
					</view>
				</template>
				<!-- 退货退款中 换货中 -->
				<template v-else-if="item.status == 8 || item.status == 9">
					<view>
						<u-button plain throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="true" type="mini" shape="circle" color="#5780EF">联系客服</u-button>
					</view>
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">查看售后</u-button>
					</view>
				</template>
				<!-- 换货已发货 -->
				<template v-else-if="item.status == 10">
					<view>
						<u-button plain throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="true" type="mini" shape="circle" color="#5780EF">联系客服</u-button>
					</view>
					<view>
						<u-button throttleTime="1000" :customStyle="{width: '160rpx', height: '56rpx'}" :hairline="false" type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)">确认收货</u-button>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	const current = ref(0)
	const tabsList = ref([{
			name: '全部'
		},
		{
			name: '待支付'
		},
		{
			name: '待发货'
		},
		{
			name: '待收货'
		},
		{
			name: '售后中'
		},
		{
			name: '已完成'
		}
	])
	
	// 订单列表
	const orderList = ref([
		{ name: '济世堂药品货庄', status: 1 },
		{ name: '济世堂药品货庄', status: 2 },
		{ name: '济世堂药品货庄', status: 3 },
		{ name: '济世堂药品货庄', status: 4 },
		{ name: '济世堂药品货庄', status: 5 },
		{ name: '济世堂药品货庄', status: 6 },
		
		{ name: '济世堂药品货庄', status: 7 },
		{ name: '济世堂药品货庄', status: 8 },
		{ name: '济世堂药品货庄', status: 9 },
		{ name: '济世堂药品货庄', status: 10 },
	])
	const tabsChange = (e) => {
		current.value = e.index
	}
	const goOrderDetail = (item) => {
		uni.navigateTo({
			url: `/mine/commodity/detail?status=${item.status}`
		})
	}
</script>

<style lang="scss" scoped>
	.order-list {
		margin-top: 40rpx;
		padding: 0 26rpx 150rpx;
		.order-item {
			padding: 36rpx 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 26rpx;
			.status-box {
				@include between(100%);
				padding-bottom: 30rpx;
				border-bottom : 1rpx solid #E8E8E8;
				margin-bottom: 30rpx;
				.name {
					color: #312C2A;
				}
				.status {
					display: flex;
					align-items: center;
					color: #6087EF;
				}
				.status1 {
					color: #AAAAAA;
				}
			}
			.content-box {
				@include between(100%, 100%);
				position: relative;
				.right {
					flex: 1;
					margin-left: 22rpx;
					@include between(100%, 170rpx);
					flex-direction: column;
					align-items: flex-start;
					padding: 10rpx 0;
					color: #000000;
					font-size: 30rpx;
					.com-title {
						@include over-ellip(450rpx);
						font-weight: bold;
					}
				}
				.icon {
					position: absolute;
					bottom: 0;
					right: 0;
					z-index: 99;
				}
			}
			.btns-box {
				padding-top: 32rpx;
				border-top: 1rpx solid #E8E8E8;
				margin-top: 30rpx;
				@include end(100%);
				& > view {
					margin-left: 24rpx;
				}
				.message {
					font-size: 26rpx;
					color: #D66A44;
				}
			}
		}
	}
</style>